<template>
  <div class="cyy_dataKb">
    <bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true">
        <div slot="main" class="bestrideAreaShop">
            <div class="maskView">
              <div class="wrapper"></div>
            </div>
            <div class="dataDisplay">
                <top-logo-title :hideLogo="true">
                    <div slot="topTitle">电子商务产业园</div>
                </top-logo-title>
                <div class="chart">
                    <!-- left图片 -->
                    <img class="leftImg" src="../../../../../static/img/cyy/jl_shujupingtai.png" alt="">
                    <!-- 总数据 -->
                    <div class="topView">
                      <div class="collect">
                        <img src="../../../../../static/img/cyy/jl_qiye.png" alt="">
                        <p> <span>{{JLtotalData.admission}}</span> <span>入驻企业数</span> </p>
                      </div>
                      <div class="hair">
                        <img src="../../../../../static/img/cyy/jl_fuhua.png" alt="">
                        <p> <span>{{JLtotalData.hatch}}</span> <span>孵化企业数</span> </p>
                      </div>
                      <div class="belox">
                        <img src="../../../../../static/img/cyy/jl_jiuye.png" alt="">
                        <p> <span>{{JLtotalData.employment}}</span> <span>带动就业数</span> </p>
                      </div>
                    </div>
                    <!-- <div class="subheadingView">
                      <div class="box">
                        <img src="../../../../../static/img/cyy/jl_yuanqu.png" alt="">
                        <p>
                          <span class="tit">园区面积: </span>
                          <span class="num">18</span>
                          <span class="unit">万㎡</sup></span>
                        </p>
                      </div>
                      <div class="box">
                        <img src="../../../../../static/img/cyy/jl_jianzhu.png" alt="">
                        <p>
                          <span class="tit">建筑面积: </span>
                          <span class="num">90</span>
                          <span class="unit">万㎡</span>
                        </p>
                      </div>
                      <div class="box">
                        <img src="../../../../../static/img/cyy/jl_chewei.png" alt="">
                        <p>
                          <span class="tit">车位: </span>
                          <span class="num">189</span>
                        </p>
                      </div>
                    </div> -->
                    <div class="bootomView">
                      <div>
                        <span>{{JLtotalData.park}}</span> 
                        <span>园区面积(亩)</span>
                      </div>
                      <div>
                        <span>{{JLtotalData.build}}</span> 
                        <span>建筑面积(万㎡)</span>
                      </div>
                      <div>
                        <span>{{JLtotalData.parking}}</span> 
                        <span>车位</span>
                      </div>
                    </div>
                    <!-- 询盘区域及占比 -->
                    <div class="areaOf">
                        <main-title>
                          <span slot="title">仓储数据统计分析</span>
                        </main-title>
                        <div class="main">
                          <div class="detailsBox">
                            <span>948,573</span>
                            <span>仓储总面积 ( ㎡ )</span>
                          </div>
                          <div class="chartBox">
                              <pie-chart v-model="storageAreaArr" :option="storageAreaOption" :chartStyle="'min-height:230px'"></pie-chart>
                          </div>
                        </div>
                    </div> 
                    <!-- 商品热度图示 -->
                    <div class="commodityHeat">
                        <main-title>
                          <span slot="title">年度快递量及收入情况</span>
                        </main-title>
                        <div class="main">
                          <div class="detailsBox">
                            <span>{{deliveryQuantity}}</span>
                            <span>快件量(件)</span>
                            <span><i style="font-family:inherit;font-size:28px;">&yen;</i>{{expressIncome}}</span>
                            <span>快件收入(元)</span>
                          </div>
                          <div class="chartBox">
                            <bar-charts slot="main" v-model="barChartsArr" :option="barChartsOption" :chartStyle="'min-height:260px'"></bar-charts>
                          </div>
                          
                        </div>
                    </div>
                    <!-- 商品热度图示 -->
                    <div class="analyze">
                        <main-title>
                          <span slot="title">电商营业数据分析</span>
                        </main-title>
                        <div class="main">
                          <div class="detailsBox">
                          <span><i style="font-family:inherit;font-size:28px;">&yen;</i>{{Math.round(totalData)}}</span>
                          <span>园区电商</span>
                          <span>总交易额(万元)</span>
                          </div>
                          <div class="chartBox">
                            <line-chartss v-model="tradingInArr" :chartStyle="'width:450px;min-height:260px;'" :option="lineChartOption"></line-chartss>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </bg-lay-out>
  </div>
</template>
<script>
require("@/components/watch3D/watch3D.min.js");
import topLogoTitle from "@/components/cyy/topLogoTitle";
import mainTitle from "@/components/cyy/mainTitle";
import lineChartss from "@/components/Charts/lineChartss";
import barCharts from "@/components/Charts/barCharts";
import ICountUp from "vue-countup-v2";
import bgLayOut from "@/components/bgLayOut/index";
import liquidfillChart from "@/components/Charts/liquidfillChart.vue";
import hotChart from "./hotChart";
import halfpiechart from "./bestrideAreahalfpiechart.vue";
import areaShopMap from "@/components/cyy/bestrideAreaShopMap.vue";
import pieChart from "@/components/Charts/pieChart";
import {
  GetIndustrialParkOperatingData,
  GetIndustrialParkEcommerceData,
  GetDetailListCrossBorder,
  GetDetailList,
  GetDoubleDetailList
} from "@/api/cyy/researchInstitute";
export default {
  name: "sellAnalysis",
  components: {
    topLogoTitle,
    mainTitle,
    ICountUp,
    bgLayOut,
    lineChartss,
    liquidfillChart,
    hotChart,
    barCharts,
    halfpiechart,
    areaShopMap,
    pieChart
  },
  data() {
    return {
      deliveryQuantity: 0, // 快递量
      expressIncome: 0, // 快递收入
      JLtotalData: {}, // 经略页面总数据
      totalData: 0, // 年度总交易额
      storageAreaArr: [], // 仓储面积
      storageAreaOption: {
        legendIndex: 1, // legend 需要显示的数据
        otherData: [],
        startAngle: 300,
        hidePieMargin: true,
        otherColor: ["#F0BD26", "#EB5A24"],
        otherRadius: [0, "50%"],
        otherPosion: "inside",
        otherFormatter: "{d}%",
        otherLabel: true,
        otherCenter: ["70%", "40%"],
        color: ["#28E787", "#00D1FF"],
        center: ["70%", "40%"],
        legend: {
          bottom: "0",
          right: "10%",
          itemGap: 10
        },
        showLabel: true, // 是否显示图标 的label
        showLine: true // 是否显示图标线 的label
      },
      barChartsArr: [],
      barChartsOption: {
        color: ["#28E787", "#00D1FF"],
        barWidth: 18,
        grid: {
          top: 50,
          left: "20%"
        },
        legend: {
          top: 200
        },
        showLabel: true,
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: ["#00D0FF", "#28E787"],
        endColor: ["#0C43FC", "#009145"]
      },
      lineChartOption: {
        grid: {
          top: 50,
          left: "20%"
        },
        legend: {
          top: 200
        },
        hideLineColor: true,
        showSymbol: "none",
        color: ["#F0BF24", "#00D0FE"],
        tooltip: {
          show: false
        },
        showLabel: true,
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "rgba(40,231,135,0.5)",
        endColor: "rgba(40,231,135,0.1)"
      },
      tradingInArr: [],
      countryPriceArr: [] // 国家合同总价
    };
  },
  mounted() {
    this.setData();
    this.setMap();
    this.fechData();
  },
  methods: {
    fechData() {
      this.getTotalData();
      this.getbarChartsArr();
      this.getData();
    },
    // 获取页面总数据
    async getData() {
      const res = await GetIndustrialParkOperatingData();
      if (res.data.code === "0") {
        this.$set(this, "JLtotalData", res.data.result);
      }
    },
    // 指定指标指定时间段按日按周按月 （双项）
    async getbarChartsArr() {
      const p = {
        queryType: "28009",
        timeType: "3010"
      };
      const res = await GetDoubleDetailList(p);
      if (res.data.code === "0") {
        var barChartsArr = [];
        var deliveryQuantity = 0;
        var expressIncome = 0;
        res.data.result.forEach(item => {
          var obj = {
            name: item.xData1,
            list: item.list,
            value: 16
          };
          barChartsArr.push(obj);
          deliveryQuantity = deliveryQuantity + item.list[0].value;
          expressIncome = expressIncome + item.list[1].value;
        });
        this.$set(this, "barChartsArr", barChartsArr);
        this.$set(this, "deliveryQuantity", Math.round(deliveryQuantity));
        this.$set(this, "expressIncome", Math.round(expressIncome));
      }
    },
    // 获取页面总数据
    async getTotalData() {
      const p = {
        timeType: "3010",
        queryType: "39001"
      };
      const res = await GetDetailListCrossBorder(p); // 跨境
      if (res.data.code === "0") {
        const pp = {
          timeType: "3010",
          queryType: "34001"
        };
        const result = await GetDetailList(pp); // 内贸
        if (result.data.code === "0") {
          var tradingInArr = [];
          var totalData = 0;
          for (var i = 0; i < result.data.result.reList.length; i++) {
            var newObj = {
              name:
                result.data.result.reList[i].xData.slice(
                  5,
                  result.data.result.reList[i].xData.length
                ) + "月",
              list: [
                {
                  name: "自贸电商",
                  value: result.data.result.reList[i].value
                },
                {
                  name: "跨境电商",
                  value: res.data.result[i].value
                }
              ],
              value:
                result.data.result.reList[i].value + res.data.result[i].value
            };
            tradingInArr.push(newObj);
            totalData =
              totalData +
              result.data.result.reList[i].value +
              res.data.result[i].value;
          }
          this.$set(this, "tradingInArr", tradingInArr);
          this.$set(this, "totalData", totalData);
        }
      }
    },
    setMap() {
      const w3d = new watch3D({
        wrapper: ".wrapper",
        autoplay: true,
        width: 11908,
        // reverse: false,
        height: 8250,
        // num: 12,
        // maxY: 25,
        tips: {},
        resource: "../../../../../static/img/cyy/1.jpg"
      });
    },
    setData() {
      var storageAreaArr = [
        {
          name: "传统仓",
          value: 120
        },
        {
          name: "电商仓储",
          value: 180
        },
        {
          name: "跨境电商",
          value: 200,
          itemObj: {
            value: 200,
            name: "",
            label: {
              show: false
            },
            tooltip: { show: false },
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: "transparent",
                borderColor: "transparent",
                borderWidth: 0
              }
            }
          }
        }
      ];
      var storageAreaOhter = [
        {
          name: "已占用仓",
          value: 300
        },
        {
          name: "未占用仓",
          value: 200
        }
      ];
      this.$set(this, "storageAreaArr", storageAreaArr);
      this.$set(this.storageAreaOption, "otherData", storageAreaOhter);
      var countryPriceArr = [
        {
          name: "尼日利亚",
          value: 200,
          barLinearColor: ["#008E45", "#28E787"]
        },
        {
          name: "西班牙",
          value: 400,
          barLinearColor: ["#008E45", "#28E787"]
        },
        {
          name: "澳大利亚",
          value: 500,
          barLinearColor: ["#008E45", "#28E787"]
        },
        {
          name: "缅甸",
          value: 600,
          barLinearColor: ["#008E45", "#28E787"]
        },
        {
          name: "意大利",
          value: 800,
          barLinearColor: ["#008E45", "#28E787"]
        },
        {
          name: "毛里求斯",
          value: 1000,
          barLinearColor: ["#008E45", "#28E787"]
        },
        {
          name: "阿联酋",
          value: 1300,
          barLinearColor: ["#008E45", "#28E787"]
        },
        {
          name: "英国",
          value: 1500,
          barLinearColor: ["#00D1FF", "#00FFFF"]
        },
        {
          name: "肯尼亚",
          value: 1800,
          barLinearColor: ["#F38F1E", "#F0BD26"]
        },
        {
          name: "美国",
          value: 2000,
          barLinearColor: ["#ED5A24", "#F40F67"]
        }
      ];
      this.$set(this, "countryPriceArr", countryPriceArr);
    }
  }
};
</script>
<style>
@import "../../../../styles/jquery-barrager.css";
@import "../../../../components/watch3D/watch3D.min.css";
</style>

<style scoped>
.wrapper {
  width: 854px;
  height: 538px;
  /* -webkit-mask: radial-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 60%);
  filter: brightness(100%); */
}
</style>

<style scoped lang="scss">
@import "../../../../styles/base/_parameters";

.bestrideAreaShop {
  .maskView {
    position: absolute;
    top: 290px;
    left: 240px;
    z-index: 1;
    padding: 15px;
    border: 1px solid #00ffff;
    border-radius: 15px;
  }
  .dataDisplay {
    @include absoluteAllSides(0, 0, 0, 0, 10);
    & .chart {
      @include absoluteAllSides(150, 40, 50, 75, 1);
      .areaOf {
        position: absolute;
        top: 0;
        right: 140px;
        width: 568px;
        height: 260px;
        & .main {
          height: 220px;
          width: 100%;
          // background: #00ffff;
          display: flex;
          justify-content: space-between;
          .detailsBox {
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            & span:nth-of-type(1) {
              color: #f8ab22;
              line-height: 1;
              @include din(38px);
            }
            & span:nth-of-type(2) {
              color: #00ffff;
              font-size: 18px;
            }
          }
        }
      }
      .chartBox {
        width: 70%;
        height: 100%;
      }
      .commodityHeat {
        position: absolute;
        right: 60px;
        bottom: 320px;
        width: 644px;
        height: 260px;
        & .main {
          height: 220px;
          width: 100%;
          // background: #00ffff;
          display: flex;
          justify-content: space-between;
          .detailsBox {
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            & span:nth-of-type(1),
            & span:nth-of-type(3) {
              color: #f8ab22;
              line-height: 1;
              margin-top: 10px;
              @include din(38px);
            }
            & span:nth-of-type(2),
            & span:nth-of-type(4) {
              color: #00ffff;
              font-size: 18px;
            }
          }
        }
      }
      .analyze {
        height: 260px;
        width: 644px;
        position: absolute;
        left: 1100px;
        bottom: 0;
        & .main {
          height: 220px;
          width: 100%;
          // background: #00ffff;
          display: flex;
          justify-content: space-between;
          .detailsBox {
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            & span:nth-of-type(1) {
              color: #f8ab22;
              line-height: 1;
              @include din(38px);
            }
            & span:nth-of-type(2),
            & span:nth-of-type(3) {
              color: #00ffff;
              font-size: 18px;
            }
          }
        }
      }
      .leftImg {
        position: absolute;
        left: -74px;
        top: 40px;
        width: 196px;
        height: 653px;
      }
      .topView {
        position: absolute;
        top: 0px;
        left: 250px;
        display: flex;
        justify-content: space-between;
        p {
          display: flex;
          flex-direction: column;
        }
        p span:nth-of-type(1) {
          color: #f8ab22;
          line-height: 1;
          @include din(52px);
        }
        p span:nth-of-type(2) {
          color: #00ffff;
          font-size: 24px;
          line-height: 1;
        }
        .collect {
          display: flex;
          img {
            width: 58px;
            height: 68px;
            margin-top: 12px;
            margin-right: 15px;
          }
        }
        .hair {
          display: flex;
          margin-left: 60px;
          img {
            width: 58px;
            height: 68px;
            margin-top: 12px;
            margin-right: 20px;
          }
        }
        .belox {
          display: flex;
          align-items: center;
          margin-left: 60px;
          img {
            width: 58px;
            height: 68px;
            // margin-top: 12px;
            margin-right: 20px;
          }
        }
      }
      .bootomView {
        position: absolute;
        bottom: 0px;
        left: 300px;
        display: flex;
        justify-content: space-between;
        & div {
          width: 200px;
          height: 120px;
          background: rgba($color: #000000, $alpha: 0.4);
          display: flex;
          flex-direction: column;
          position: relative;
          align-items: center;
          justify-content: center;
          & span:nth-of-type(1) {
            color: #f8ab22;
            line-height: 1;
            @include din(38px);
          }
          & span:nth-of-type(2) {
            color: #00ffff;
            font-size: 18px;
          }
        }
        & div:nth-of-type(-1n + 2):after {
          content: "";
          position: absolute;
          width: 1px;
          background: rgba($color: #00d1ff, $alpha: 0.2);
          height: 76px;
          right: 0;
          top: 22px;
        }
      }
      // .subheadingView {
      //   position: absolute;
      //   top: 120px;
      //   left: 280px;
      //   display: flex;
      //   justify-content: space-between;
      //   & img {
      //     display: inline-block;
      //     width: 25px;
      //     height: 25px;
      //     margin-top: 8px;
      //     margin-right: 10px;
      //   }
      //   .box:nth-of-type(2),
      //   .box:nth-of-type(3) {
      //     margin-left: 50px;
      //   }
      //   .box {
      //     display: flex;
      //     justify-content: space-between;
      //   }
      //   .tit {
      //     font-size: 22px;
      //     color: #00ffff;
      //   }
      //   .num {
      //     color: #f8ab22;
      //     line-height: 1;
      //     @include din(36px);
      //   }
      //   .unit {
      //     font-size: 18px;
      //     color: #00ffff;
      //   }
      // }
    }
  }
}
</style>